<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="8">
        <el-select
          style="width:100%"
          clearable
          filterable
          v-model="queryParam.provinceCode"
          @change="provinceChange(queryParam.provinceCode, true,false)"
          placeholder="选择省"
        >
          <el-option
            v-for="item in id=='right'? provinceList : proxy.addListNoLimit(provinceList,'code', 'name')"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </el-col>
      <el-col :span="8">
        <el-select
          style="width:100%"
          clearable
          filterable
          v-model="queryParam.cityCode"
          @change="provinceChange(queryParam.cityCode, false,false)"
          placeholder="选择市"
        >
          <el-option
            v-for="item in id=='right'? cityList: proxy.addListNoLimit(cityList,'code', 'name')"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </el-col>
      <el-col :span="8">
        <el-select
          style="width:100%"
          clearable
          filterable
          placeholder="选择县"
          v-model="queryParam.areaCode"
          @change="areaCodeChange"
        >
          <el-option
            v-for="item in id=='right'? areaList: proxy.addListNoLimit(areaList, 'code', 'name')"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { getAreaList } from "@/api/system/org";

const { proxy } = getCurrentInstance();

const provinceList = ref([]);
const cityList = ref([]);
const areaList = ref([]);

//定义参数 已经选中的ITEMID
const props = defineProps({
  id: {
    type: String, //参数类型
    required: true, //是否必须传递
  },
  viewForm: {
    type: Object, //参数类型
  }
});
const emits = defineEmits(["queryParam"]["areaCode"]);
const data = reactive({
  queryParam: {
    cityCode: props.id=='left'? -1 : null,
    areaCode: props.id=='left'? -1 : null,
    provinceCode: props.id=='left'? -1 : null
  },
});

const { queryParam } = toRefs(data);

watch(queryParam.value, () => {
  queryParam.value.id = props.id;
  emits("queryParam", queryParam.value);
});

watch(() => props.viewForm, () => {
  if (props.id == "right") {
    queryParam.value.provinceCode = props.viewForm.provinceCode;
    provinceChange(props.viewForm.provinceCode, true,true);
    provinceChange(props.viewForm.cityCode, false,true);
  }
});

function getArea() {
  getAreaList({ rank: 1 }).then((res) => {
    provinceList.value = res.data;
  });
}

// isAuto 是否自动
function provinceChange(val, dis,isAuto) {
  if (dis) {
    areaList.value = [];
    cityList.value = [];
    if (!val && props.id=='left') {
      queryParam.value.provinceCode = -1;
      queryParam.value.cityCode = -1;
      queryParam.value.areaCode = -1;
    } else if(props.id=='left') {
      queryParam.value.cityCode = -1;
      queryParam.value.areaCode = -1;
    } else {
      queryParam.value.cityCode = null;
      queryParam.value.areaCode = null;
    }
  } else {
    areaList.value = [];
    if (!val && props.id=='left') {
      queryParam.value.cityCode = -1;
      queryParam.value.areaCode = -1;
    } else if(props.id=='left'){
      queryParam.value.areaCode = -1;
    } else {
      queryParam.value.areaCode = null;
    }
  }
  if (val) {
    getAreaList({ parentCode: val }).then((res) => {
      if (dis) {
        cityList.value = res.data;
        if (isAuto) {
          queryParam.value.cityCode = props.viewForm.cityCode;
        }
      } else {
        areaList.value = res.data;
        if (isAuto) {
          queryParam.value.areaCode = props.viewForm.areaCode;
        }
      }
    });
  }
}


function areaCodeChange() {
  emits("areaCode", queryParam.value.areaCode);
}

function resetArea() {
  queryParam.value.cityCode = -1;
  queryParam.value.areaCode = -1;
  queryParam.value.provinceCode = -1;
}
// 记得暴露
defineExpose({
  resetArea,
});

getArea();
</script>

<style>
</style>